<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
			box-sizing: border-box;
		}
		ul {
			width: 100%;
			overflow: hidden;
		}
		li {
			height: 40px;
			line-height: 40px;
			position: relative;
			border-bottom: 1px solid rgb(170,170,170);
			transition: all .3s ease;
			background-color: #fff;
		}
		li .del-btn {
			position: absolute;
			top: 0;
			right: 0;
			width: 0;
			height: 100%;
			background-color: #ff5700;
			color: #fff;
			text-align: center;
			overflow: hidden;
			transition: all .3s ease;
		}
		li .msg {
			padding: 0 15px;
		}
		li .del-btn span {
			width: 50px;
			display: block;
			margin: 0 auto;
		}
	</style>
	<script src="./hammer.js"></script>
	<script>
		window.onload = function() {
			let oUl = document.querySelector('ul');
			// 没想到，querySelector是静态获取，但是getElementsByClassName是动态获取
			let oBtns = document.getElementsByClassName('del-btn');
			
			for (let i = 0; i < 10; i++) {
				// 动态创建li元素
				let oLi = document.createElement('li');
				oLi.innerHTML = `<p class="msg">${i}条信息</p><span class="del-btn"><span>删除</span></span>`;
				oUl.appendChild(oLi);
				// 获取删除按钮
				let oBtn = oLi.querySelector('.del-btn');
				// 给每个li实例化一个hammer
				let hammer = new Hammer(oLi);
				// li的左滑事件
				hammer.on('swipeleft', function() {
					// 排他，当前li滑出删除，其他li就隐藏删除
					Array.from(oBtns).forEach(function(elem) {
						elem.style.width = '0';
					})

					oBtn.style.width = '20%';
				})
				// li的右滑事件
				hammer.on('swiperight', function() {
					oBtn.style.width = '0';
				})
				// 删除按钮点击事件，删除的时候是有动画的
				// 动画执行过程：按钮宽度变为0-->li的高度变为0-->删除li
				oBtn.addEventListener('click', function() {
					oBtn.style.width = '0px';
					// transitionend会在绑定元素的动画执行完成之后触发
					oBtn.addEventListener('transitionend', function(ev) {
						// 这里如果执行两个动画会触发两次transitionend事件
						oLi.style.height = '0px';
						// oLi.style.borderBottom = '0px solid #333';

						// 阻止冒泡行为，如果不阻止，会在oBtn的transitionend事件执行时冒泡到oLi，把oLi的transitionend也给执行了。
						ev.cancelBubble = true;
						oLi.addEventListener('transitionend', function() {
							oUl.removeChild(oLi);
						}, false)
					}, false)
				}, false)
			}
		}
	</script>
</head>
<body>
	<div class="box">
		<ul>
		</ul>
	</div>
</body>
</html>